# jQuery on() Method

jQuery Event Methods

## Example

Attach a click event handler to the <p> element:

$("p").on("click",function(){
alert("The paragraph was clicked.");
});
Try it yourself »

## Definition and Usage

The on() method attaches one or more event handlers for the selected elements and child elements.

As of jQuery version 1.7, the on() method is the new replacement for the bind(), live() and delegate() methods. This method brings a lot of consistency to the API, and we recommend that you use this method, as it simplifies the jQuery code base.

Note: Event handlers attached using the on() method will work for both current and FUTURE elements (like a new element created by a script).

Tip: To remove event handlers, use the off() method.

Tip: To attach an event that only runs once and then removes itself, use the one() method.

## Syntax

$(selector).on(event,childSelector,data,function,map)

Parameter | Description
--- | ---
event | Required. Specifies one or more event(s) or namespaces to attach to the selected elements. Multiple event values are separated by space. Must be a valid event
childSelector | Optional. Specifies that the event handler should only be attached to the specified child elements (and not the selector itself, like the deprecated delegate() method).
data | Optional. Specifies additional data to pass along to the function
function | Required. Specifies the function to run when the event occurs
map | Specifies an event map ({event:function, event:function, ...}) containing one or more event to attach to the selected elements, and functions to run when the events occur

## Try it Yourself - Examples

Changing from bind() to on()
How to use on() to achieve the same effect as bind().

Changing from delegate() to on()
How to use on() to achieve the same effect as delegate().

Changing from live() to on()
How to use on() to achieve the same effect as live().

Attach multiple event handlers
How to attach multiple event handlers to an element.

Attach multiple event handlers using the map parameter
How to attach multiple event handlers to the selected elements using the map parameter.

Attach a custom event on an element
How to attach a customized namespace event on an element.

Pass along data to the function
How to pass along data to the function.

Add event handlers for future elements
Show that the on() method also works for elements not yet created.

Remove an event handler
How to remove an event handler using the off() method.

jQuery Event Methods

### WEB HOSTING

UK Reseller Hosting

### WEB BUILDING

FREE Website BUILDER Free HTML5 Templates

### W3SCHOOLS EXAMS

HTML, CSS, JavaScript, PHP, jQuery, XML, and ASP Certifications

### SHARE THIS PAGE

### Color Picker

### HTML/CSS

HTML Tutorial HTML5 Tutorial CSS Tutorial CSS3 Tutorial Bootstrap Tutorial

### JavaScript

JavaScript Tutorial jQuery Tutorial jQuery Mobile Tutorial AngularJS Tutorial AJAX Tutorial JSON Tutorial

### Graphics

Canvas Tutorial SVG Tutorial Google Maps Tutorial

### Server Side

SQL Tutorial PHP Tutorial ASP Tutorial ASP.NET Tutorial VBScript Tutorial AppML Tutorial

### Web

Web Building Web Statistics Web Certification

### XML

XML Tutorial DTD Tutorial Schema Tutorial XML DOM Tutorial XPath Tutorial XSLT Tutorial XQuery Tutorial XSL-FO Tutorial RSS Tutorial WSDL Tutorial

### HTML/CSS

HTML Tag Reference HTML Event Reference HTML Color Reference CSS 1,2,3 Reference Bootstrap Reference

### JavaScript

JavaScript Reference HTML DOM Reference jQuery Reference jQuery Mobile Reference Google Maps Reference

### Server Side

PHP Reference SQL Reference ASP Reference VBScript Reference Razor Reference ASP.NET Reference

### XML

XML DOM Reference XSLT Reference XSL-FO Reference XPath Reference XQuery Reference Schema Reference RSS Reference SVG Reference

### HTML Charsets

HTML Character Sets HTML ASCII HTML ANSI HTML Windows-1252 HTML ISO-8859-1 HTML Symbols HTML UTF-8

### HTML/CSS

HTML Examples CSS Examples

### Browser Scripting

JavaScript Examples HTML DOM Examples jQuery Examples jQuery Mobile Examples AngularJS Examples AJAX Examples

### Server Scripting

PHP Examples ASP Examples VBScript Examples Razor Examples .NET Examples

### XML Languages

XML Examples DTD Examples XML DOM Examples XSL Examples XSLT Examples XPath Examples XQuery Examples Schema Examples RSS Examples SVG Examples